<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:cc="http://java.sun.com/jsf/composite"
	xmlns:p="http://primefaces.org/ui">

	<cc:interface>
		<cc:attribute name="contact" required="true"
			type="similan.br18.domain.Contact" />
		<cc:attribute name="styleClass" required="false" default="contactPanel" />
	</cc:interface>

	<cc:implementation>
		<h:outputScript library="js" name="contactList.js"/>
	
		<p:remoteCommand name="getAllContacts" 
			update=":#{cc.clientId}:contactListPanel :#{cc.clientId}:detailPanel"
			action="#{contactPanelView.getAllContacts(cc.attrs.contact)}"
			process="@this"
			oncomplete="organizeTables()" />
	
		<div id="#{cc.clientId}" class="#{cc.attrs.styleClass}">
			<p:outputPanel id="groupsPanel" layout="block"
				styleClass="groupsPanel">
				<p:outputPanel id="textFilterPanel" layout="block">
					<center>
						<p:inputText value="#{contactPanelView.filterString}" id="filterString">
							<p:ajax event="keyup" update=":#{cc.clientId}:contactListPanel :#{cc.clientId}:detailPanel" 
								listener="#{contactPanelView.filterByText(cc.attrs.contact)}" process="@this"
								oncomplete="organizeTables()"/>
						</p:inputText>
						<p:commandButton icon="ui-icon-search" iconPos="center" process="@parent"
							update=":#{cc.clientId}:contactListPanel :#{cc.clientId}:detailPanel"
							action="#{contactPanelView.filterByText(cc.attrs.contact)}" oncomplete="organizeTables()"/>
					</center>
				</p:outputPanel>
				<br />
				<p:commandLink value="All Connections" style="margin-left:10px;" onclick="getAllContacts()" />
				<p:accordionPanel id="groupPanel"
					value="#{cc.attrs.contact.contactType.tagTypes}" var="group"
					dynamic="true" cache="true" styleClass="groupPanel">
					<p:tab id="subGroup" title="#{group.name}"
						titleStyleClass="subGroupTitle">
						<p:dataList id="subGroupList" styleClass="subGroupList"
							value="#{contactPanelView.getGroupsByTag(cc.attrs.contact, group)}"
							var="subGroup" type="unordered">
							<p:column>
								<p:commandLink id="subGroupLink" value="#{subGroup.name}"
									action="#{contactPanelView.filterBySubGroup(cc.attrs.contact, subGroup)}"
									process="@this" update=":#{cc.clientId}:contactListPanel :#{cc.clientId}:detailPanel"
									oncomplete="organizeTables()">
									<f:setPropertyActionListener target="#{contactPanelView.selectedGroup}" 
										value="#{subGroup}"/>
								</p:commandLink>
							</p:column>
						</p:dataList>
					</p:tab>
				</p:accordionPanel>
			</p:outputPanel>

			<p:outputPanel id="contactListPanel" layout="block"
				styleClass="contactListPanel">
				<p:outputPanel layout="block" id="charListPanel" styleClass="charListPanel">
					<p:keyboard layout="custom" showMode="button" readonly="true" style="visibility:hidden;"
						layoutTemplate="#ABCDEF,GHIJKLM,NOPQRST,UVWXYZ" id="keyPad" widgetVar="keyPadWidget" />
				</p:outputPanel>

				<p:dataTable id="contactListTableRepeater"
					styleClass="contactListTableRepeater" rowStyleClass="charGroupRow"
					value="#{contactPanelView.groupedContacts.keySet().toArray()}"
					var="char" sortBy="#{char}"
					rendered="#{not empty contactPanelView.groupedContacts.keySet().toArray()}">
					<p:column style="border:0px none;">
						<p:dataTable value="#{contactPanelView.groupedContacts.get(char)}"
							styleClass="contactListTable" var="contact"
							id="contactListTable" rowKey="#{contact.id}"
							selection="#{contactPanelView.selectedContact}"
							selectionMode="single">

							<p:ajax event="rowSelect" process="@this" oncomplete="organizeTables()"
								update=":#{cc.clientId}:detailPanel" listener="#{contactPanelView.selectContact}"/>
							<p:ajax event="rowUnselect" process="@this" oncomplete="organizeTables()"
								update=":#{cc.clientId}:detailPanel" />

							<f:facet name="header">
								<h:outputText value="#{char}" style="float:left" />
							</f:facet>

							<p:column style="width:40px; border:1px solid transparent; padding-top:7px; padding-bottom:7px;">
								<h:graphicImage library="images" name="#{contact.imagePath}" />
							</p:column>

							<p:column style="border:1px solid transparent; padding-top:7px; padding-bottom:7px; padding-left:5px; v-align:middle;">
								<h:outputText value="#{contact.fullName}"
									style="font-weight:bold;" />
								<br/>
								<h:outputText value="#{contact.title}" />
							</p:column>

							<p:column style="width:15px; border:1px solid transparent; padding-top:7px; padding-bottom:7px; top:-9px; position:relative;">
								<h:outputText value="#{contact.contacts.size()}"
									rendered="#{contact.contacts ne null}" />
							</p:column>
						</p:dataTable>
					</p:column>
				</p:dataTable>
			</p:outputPanel>

			<p:outputPanel id="detailPanel" layout="block"
				styleClass="detailPanel">
				<p:panelGrid styleClass="contactDetailPanelGrid"
					id="contactDetailPanelGrid"
					rendered="#{contactPanelView.selectedContact ne null}">
					<p:row>
						<p:column id="contactNameColumn" styleClass="contactNameColumn">
							<p:commandLink value="#{contactPanelView.selectedContact.fullName}" style="font-weight:bold;" />
						</p:column>
						<p:column id="contactPhotoColumn" styleClass="contactPhotoColumn"
							rowspan="3">
							<h:graphicImage library="images"
								name="#{contactPanelView.selectedContact.imagePath}" />
						</p:column>
					</p:row>

					<p:row>
						<p:column>
							<h:outputText
								value="#{contactPanelView.selectedContact.title}" />
							<h:outputText value=" at #{contactPanelView.selectedContact.company}" 
								rendered="#{not empty contactPanelView.selectedContact.company}" />
						</p:column>
						<h:outputText value="" />
					</p:row>
					<p:row>
						<p:column>
							<p:commandLink value="#{contactPanelView.selectedContact.contacts.size()} connections" />
						</p:column>
						<h:outputText value="" />
					</p:row>
					<p:row>
						<p:column colspan="2">
							<p:commandLink value="Send Message" /><br/>
							<p:commandLink value="Edit Details" />
						</p:column>
					</p:row>
					<p:row>
						<p:column colspan="2">
							<h:outputText value="Tags:" style="font-weight:bold;" /><br/>
							<h:outputText value="#{contactPanelView.getTagsByContact(cc.attrs.contact)}" />
							<p:spacer height="0" width="5"/>
							<p:commandLink value="Edit Tags" />
						</p:column>
					</p:row>
					<p:row>
						<p:column colspan="2">
							<h:outputText value="Email:" style="font-weight:bold;" /><br/>
							<p:commandLink value="#{contactPanelView.selectedContact.email}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column colspan="2">
							<h:outputText value="Title:" style="font-weight:bold;" /><br/>
							<h:outputText value="#{contactPanelView.selectedContact.title}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column colspan="2">
							<h:outputText value="Company:" style="font-weight:bold;" /><br/>
							<h:outputText value="#{contactPanelView.selectedContact.company}" />
						</p:column>
					</p:row>
					<p:row>
						<p:column colspan="2">
							<h:outputText value="Address:" style="font-weight:bold;" /><br/>
							<h:outputText value="#{contactPanelView.selectedContact.address}" />
						</p:column>
					</p:row>
				</p:panelGrid>
				
			</p:outputPanel>
		</div>

		<script type="text/javascript">
			var clientId = '#{cc.clientId}';
			/*<![CDATA[*//*---->*/
				$(document).ready(function(){
					getAllContacts();
				});
			/*--*//*]]>*/
		</script>
	</cc:implementation>
</ui:composition>